<template>
  <el-card class="box-card">
    <template #header class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="'/home'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <!-- 表单 -->
    <el-form label-width="100px">
      <el-form-item label="状态:">
        <el-radio-group v-model="form.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道:   ">
        <HmSelect :form="form"></HmSelect>
      </el-form-item>
      <!-- <h3>{{ form.begin_pubdate }}</h3>
      <h3>{{ form.end_pubdate }}</h3> -->
      <el-form-item label="日期:   ">
        <el-date-picker
          v-model="form.picker"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getArticle" type="primary">筛选</el-button>
      </el-form-item>
    </el-form>

    <!-- 文章列表熏染 -->
    <el-card>
      <template #header> 根据筛选条件共查询到{{ total }}条结果 </template>
      <el-table :data="articleList" stripe border>
        <el-table-column label="封面">
          <template v-slot="scope">
            <img class="cover" :src="scope.row.cover.images[0]" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title"
          width="150px"
        ></el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="scope">
            {{ scope.row.status === 2 ? '审核通过' : '审核不通过' }}
          </template>
        </el-table-column>
        <el-table-column label="发布时间" width="200px">
          <template v-slot="scope">
            {{ scope.row.pubdate }}
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="read_count"></el-table-column>
        <el-table-column label="评论数" prop="comment_count"></el-table-column>
        <el-table-column label="点赞数" prop="like_count"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push('/publish?id=' + scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @current-change="pageChange"
        @size-change="sizeChange"
        :current-page="form.page"
        :page-sizes="[1, 2, 10, 20, 30, 40, 100]"
        :page-size="form.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </el-card>
</template>
<script>
import { article, articleDelete } from '@/api/index.js'
export default {
  name: 'Article',
  data () {
    return {
      articleList: [], // 文章列表
      channelList: this.$store.state.channelList, // 频道列表
      total: 1, // 文章总条数
      form: {
        picker: [], // 日期,[起始时间,结束时间]
        status: '', //	否		文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
        channel_id: '', //	是		不传为全部
        begin_pubdate: '', //	否		起始时间
        end_pubdate: '', //	否		截止时间
        page: 1, //	否		页码 默认为1页
        per_page: 10 //	否		每页数量 不传为默认10
      }
    }
  },

  // 监听日期组件变化
  watch: {
    'form.picker': {
      handler (newVal, oldVal) {
        if (newVal.length === 2) {
          this.form.begin_pubdate = newVal[0]
          this.form.end_pubdate = newVal[1]
        }
      },
      // 深度监听启用
      deep: true
    }
  },

  methods: {
    // 改变当前页码
    pageChange (page) {
      this.form.page = page
      this.getData()
    },
    // 改变每一页的容量
    sizeChange (size) {
      this.form.per_page = size
      this.form.page = 1
      this.getData()
    },
    // 获取/筛选文章列表
    async getData () {
      const res = await article(this.form)
      // console.log(res)
      this.articleList = res.data.results
      // 总文章数
      this.total = res.data.total_count
      // console.dir(this.articleList)
    },
    // 点击筛选获取文章列表
    async getArticle () {
      this.form.page = 1
      this.getData()
    },
    // 删除文章
    del (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await articleDelete(row.id)
          this.$message.success('删除成功')
          this.getArticle()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  },

  // created
  async created () {
    // 获取频道
    // const res = await channel()
    // console.log(res)
    // this.channelList = res.data.channels
    // 获取文章列表
    this.getData()
    //  console.log(channelList)
  }
}
</script>
<style scoped lang="less">
.cover {
  width: 50px;
}
</style>
